<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
  <%= javascript_include_tag :defaults %><%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",:cache => true %><%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js",:cache => true %><%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css", :media => "screen", :cache =>  true  %>

  <title>Event Index</title>

  <style>
    body
{
	line-height: 1.6em;
}
    #hor-minimalist-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 45px;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
#hor-minimalist-b th
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
#hor-minimalist-b td
{
	border-bottom: 1px solid #ccc;
	color: #669;
	padding: 6px 8px;
}
#hor-minimalist-b tbody tr:hover td
{
	color: #009;
}

  </style>


  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
  <script type="text/javascript">
//<![CDATA[

  var geocoder;
  var map;

  function initialize(){
    var geocoder = new google.maps.Geocoder();
    var myLatlng = new google.maps.LatLng(-25, 131);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function setCurrLoc(){
  geocoder = new google.maps.Geocoder();
  var currLoc = document.getElementById("current_loc").value;
  //var image = new google.maps.MarkerImage('expert.png',new google.maps.Size(40, 40),
  //  new google.maps.Point(0,0),new google.maps.Point(0,0));
  //var image = 'expert.png';
  if(geocoder){
        geocoder.geocode({'address': currLoc},function(results, status){
        if(status == google.maps.GeocoderStatus.OK){
                map.setCenter(results[0].geometry.location);
                var center = new google.maps.Marker({
                  map: map,
                  position: results[0].geometry.location,
                  //icon: 'public/images/icons/expert.png',
                  icon: 'http://google-maps-icons.googlecode.com/files/expert.png',
                  //icon: 'http://google-maps-icons.googlecode.com/files/factory.png',
                  title: "Me",
                  clickable: false
                });
        }else{
                alert("Geocode was not successful for the following reason: "+status);
        }//end of else
  } );
  }//end of if

  <% @events.each do |event| %>
        geocoder.geocode({'address': "<%= event.location%>"}, function(results){

        var content = "<h1>"+"<%= event.name %>"+"<\/h1>"+"<%= event.description  %>";
        var infowindow = new google.maps.InfoWindow({ 'content': content});
        var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: "<%= event.name %> "
        });
        google.maps.event.addListener(marker, 'click', function(){infowindow.open(map, marker);});
  }

  ); //end of geocode

  <% end %>
  }//end of function

  //$(function(){$("input#btnSearch", "input#createBtn").button();
  $(function(){$("input#btnSearch").button()});
  $(function(){$("input#createBtn").button()});
  $('#date').datepicker();
  //]]>
  </script>
</head>

<body onload="initialize()">
  <h1>Listing events</h1><br />
  <input type="text" id="date" name ="date"></input>


  <div>
    <input id="current_loc" type="textbox" value="Enter current location" onkeydown=
    "if (event.keyCode == 13) document.getElementById('btnSearch').click()" /> <input id=
    "btnSearch" type="button" value="Enter" onclick="setCurrLoc()" />
  </div><br />

  <div id="map_canvas" style="width: 500px; height: 400px;"></div>

 <table id="hor-minimalist-b">
    <tr>
      <th scope="col">Name</th>

      <th scope="col">Time</th>

      <th scope="col">Location</th>

      <th scope="col">Icon</th>

      <th scope="col">Description</th>

    </tr><% @events.each do |event| %>

    <tr>
      <td><%=h event.name %></td>

      <td><%=h event.time %></td>

      <td><%=h event.location %></td>

      <td><%=h event.icon%></td>

      <td><%=h event.description %></td>

      <td><%= link_to 'Show', event %></td>

      <td><%= link_to 'Edit', edit_event_path(event) %></td>

      <td>
      <%= link_to 'Destroy', event, :confirm => 'Are you sure?', :method => :delete %></td>
    </tr><% end %>
  </table><br />

  <%= will_paginate @events %>
  <%= button_to 'Create new event', new_event_path, :id =>'createBtn' %>

  <%= render :partial => "shared/footer"  %>
</body>
</html>